<template>
	<view class="">
		<view class="top_search">
			<u-input placeholder="搜索用户" prefixIcon="search" v-model="state.keyword" prefixIconStyle="font-size: 22px;color: #909399">
			</u-input>
			<u-button @tap="searchUser" class="poab_btn" type="primary" size="mini">搜索</u-button>
		</view>

		<view class="data_list">

			<u-empty v-if="state.dataList.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="请搜索">
			</u-empty>

			<view class="data_item" v-for="(item,index) in state.dataList" :key="index" @click="jumpPage(`/pages/form/form?uid=${item.id}&mobile=${item.mobile}&address=${item.address_detail}&name=${item.name}`)">
				<view class="user_info">{{item.name}}({{item.mobile}})</view>
				<view class="address">{{item.province_name}} {{item.city_name}} {{item.county_name}} {{item.address}}({{item.region_identity}})</view>
				<u-icon class="to_right" name="arrow-right" color="#666" size="20"></u-icon>
			</view>

		</view>

		<u-modal :show="state.showModal" @confirm="onModalConfim" @cancel="state.showModal= false" showCancelButton
			title="温馨提示">
			没有搜索到该用户是否立即添加
		</u-modal>

		<view class="logout">
			<svg t="1710488561774"
				class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1568"
				xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30">
				<path
					d="M496.32 939.392c-55.488 0-109.376-10.848-160.064-32.352-48.992-20.672-92.928-50.304-130.688-88.064-37.76-37.76-67.392-81.76-88.128-130.72C96 637.568 85.12 583.712 85.12 528.192c0-66.432 16.288-132.384 47.072-190.816 29.76-56.448 72.992-106.016 125.056-143.328 14.464-10.368 34.56-7.008 44.896 7.424 10.336 14.432 7.04 34.496-7.424 44.8C250.72 277.888 214.208 319.68 189.12 367.328c-26.336 49.952-39.68 104.064-39.68 160.864 0 92.672 36.096 179.808 101.632 245.312 65.504 65.536 152.608 101.632 245.248 101.632 92.608 0 179.744-36.096 245.28-101.632 65.536-65.504 101.6-152.64 101.6-245.312 0-56.736-13.312-110.944-39.68-160.864-25.088-47.616-61.632-89.44-105.632-120.992-14.432-10.304-17.792-30.368-7.424-44.8 10.368-14.432 30.432-17.824 44.864-7.424 52.096 37.312 95.392 86.88 125.12 143.328 30.816 58.432 47.104 124.384 47.104 190.816 0 55.52-10.88 109.376-32.352 160.096-20.704 48.96-50.368 92.96-88.128 130.72-37.76 37.76-81.696 67.36-130.688 88.128C605.664 928.576 551.808 939.392 496.32 939.392L496.32 939.392zM505.984 493.184c-17.76 0-32.16-14.336-32.16-32.128L473.824 80.192c0-17.728 14.4-32.16 32.16-32.16s32.192 14.432 32.192 32.16l0 380.864C538.176 478.848 523.744 493.184 505.984 493.184L505.984 493.184zM505.984 493.184"
					fill="#3C9CFF" p-id="1569"></path>
			</svg>
			<view @click="state.showLogoutModal = true" style="margin-left: 5px;">安全退出</view>
		</view>


		<u-modal :show="state.showLogoutModal" @confirm="onLogoutModalConfim" @cancel="state.showLogoutModal= false" showCancelButton
			title="温馨提示">
			确认退出吗?
		</u-modal>


	</view>
</template>

<script setup>
	import { reactive, ref, computed, onMounted} from 'vue';
	import { useStore } from 'vuex';
	import { jumpPage } from '@/common/hooks.js'
	import { searchUserApi,logoutApi } from '@/common/apis.js'
	import { onShow } from "@dcloudio/uni-app";
	const store = reactive(useStore())
	const state = reactive({
		showModal: false,
		showLogoutModal:false,
		keyword:"",
		dataList:[],
	})


	const onModalConfim = () => {
		uni.navigateTo({
			url:'/pages/adduser/adduser'
		})
	}
	
	const onLogoutModalConfim = async () => {
		const {data:res} = await logoutApi()
		if (res.code == 200) {
			store.commit('clearCacheData')
			uni.showToast({title:  '您已安全退出',icon: 'none',duration: 1000})
		}
		setTimeout(()=>{
			uni.navigateTo({
				url:'/pages/login/login'
			})
		},300)
	}

	const searchUser = async () => {
		let reqdata = {keyword:state.keyword}
		const {data:res} = await searchUserApi(reqdata)
		if (res.code == 200) {
			res.data.forEach(item=>{
				item.address_detail =  item.province_name + item.city_name + item.county_name + item.address
			})
			state.dataList = res.data
		
			if (res.data.length == 0) {
				state.showModal = true
			}
		}

	}
	
	onShow (()=>{
		if (!store.state.token){
			uni.showToast({title: '为了您的账号安全请重新登录',icon: 'none',duration: 1000})
			setTimeout(()=>{
				jumpPage('/pages/login/login')
			},400)
		}
	})
</script>

<style lang='scss' scoped>
	page {
		background-color: #F4F3F3;
		padding: 15px;
	}

	.top_search {
		background-color: #fff;
		position: relative;

		.poab_btn {
			position: absolute;
			right: 10px;
			top: 7px;
			width: 80px;
			height: 25px;

		}
	}

	.data_list {
		background-color: #FFF;
		margin-top: 15px;
		padding: 10px;
		border-radius: 5px;
		height: calc(100vh - 120px);

		.data_item {
			margin-bottom: 15px;
			position: relative;

			.to_right {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
			}

			.user_info {
				font-size: 16px;
			}

			.address {
				font-size: 14px;
				color: #666;
				margin-top: 3px;
				padding-right: 20px;
			}
		}
	}
	.logout {
		display: flex;
		align-items: center;
		background-color: #fff;
		width: max-content;
		padding: 5px;
		position: fixed;
		right: 0px;
		border-radius: 5px;
		bottom: 90px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		font-size: 14px;
	}
</style>